<template>
  <div class="goodsinfo-container">
    <!-- 商品详情{{id}} -->
    <!-- 使用mui的卡片布局card.html -->
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：
            <span style="margin-right:10px">
              <del>{{goodsinfo.market_price}}</del>
            </span>
            销售价：
            <span style="font-size:16px;color:red;font-weight:bold;">
              <del>{{goodsinfo.sell_price}}</del>
            </span>
          </p>
          <div>
            购买数量：
            <!-- goodsinfo.stock_quantity是通过ajax动态获取回来的，但是ajax是异步请求，需要消耗时间 -->
            <!-- :data-numbox-max="this.goodsinfo.stock_quantity"有可能组件会先于ajax渲染出来，这时候，goodinfo为空对象，这时候就无法控制numbox控件的最大值 -->
            <!-- 上述问题的解决方案是监视goodsinfo.stock_quantity的值发生改变时才进行赋值 -->
            <div class="mui-numbox" data-numbox-min="1">
              <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
              <input id="test" class="mui-input-numbox" type="number" value="5" />
              <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
          </div>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
          <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer btnarea">
        <mt-button type="primary" size="large" plain>图文介绍</mt-button>
        <mt-button type="danger" size="large" plain>商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js"
import swiper from "../sub-components/Swiper.vue";
export default {
  name: "",
  data() {
    return {
      lunbotu: [],
      goodsinfo: {},
    };
  },
  props: ["id"],
  components: {
    swiper,
  },
  created() {
    this.getlunbotu();
    this.getgoodsinfo();
  },
  mounted() {
    // 当组件挂载到页面中之后，初始化数字框
    mui(".mui-numbox").numbox();
  },
  methods: {
    async getlunbotu() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      // console.log("data :>> ", data);
      if (data.status === 0) {
        this.lunbotu = data.message;
        // console.log("this.lunbotu :>> ", this.lunbotu);
      }
    },
    async getgoodsinfo() {
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      if (data.status === 0) {
        this.goodsinfo = data.message[0];
        console.log("this.goodsinfo :>> ", this.goodsinfo);
      }
    },
  },
  watch: {
    // 使用场景：监听单个虚拟的数据
    // 每当监听到max值改变，不论这个值是否合法，我们都重新为mui-numbox使用js api来手动设置最大值
    // 基本数据类型可以直接监听，复杂数据类型object，array要深度监视
    goodsinfo: {
      deep: "true",
      handler: function (newval, oldval) {
        console.log(newval.stock_quantity + "---" + oldval.stock_quantity);
        // 参考https://dev.dcloud.net.cn/mui/ui/#numbox设置最大值
        mui(".mui-numbox").numbox().setOption("max", newval.stock_quantity);
      },
    },
  },

  components: {
    swiper,
  },
};
</script>

<style lang='scss' scoped>
.goodsinfo-container {
  background-color: #eee;
  // 不让里面那个盒子把margin-top冲出去
  overflow: hidden;
}
.btnarea {
  flex-direction: column;
  button + button {
    margin-top: 15px;
  }
}
</style>
